<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
      li {
        border: 1px dashed #999;
        margin: 5px;
        line-height: 35px;
        padding-left: 5px;
        font-size: 12px;
        width: 100%;
      }

      li:hover {
        background-color: hotpink;
        transition: all 0.8s ease;
      }

      .v-enter,
      .v-leave-to {
        opacity: 0;
        transform: translateY(80px);
      }

      .v-enter-active,
      .v-leave-active {
        transition: all 0.6s ease;
      }

      /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
      .v-move {
        transition: all 0.6s ease;
      }
      .v-leave-active {
        position: absolute;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div>
        <label>
          Id:
          <input type="text" v-model="id" />
        </label>

        <label>
          Name:
          <input type="text" v-model="name" />
        </label>

        <input type="button" value="添加" @click="add" />
      </div>

      <transition-group appear tag="ul">
        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
          {{item.id}} --- {{item.name}}
        </li>
      </transition-group>
    </div>

    <script>
      // 创建 Vue 实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {
          id: "",
          name: "",
          list: [
            { id: 1, name: "赵高" },
            { id: 2, name: "秦桧" },
            { id: 3, name: "严嵩" },
            { id: 4, name: "魏忠贤" }
          ]
        },
        methods: {
          add() {
            this.list.push({ id: this.id, name: this.name });
            this.id = this.name = "";
          },
          del(i) {
            this.list.splice(i, 1);
          }
        }
      });
    </script>
  </body>
</html>
